웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[React] 컴포넌트 및 엘리먼트 조건에 따라 보여주고 숨기는 방법, show and hide
Last Modified : 2020-07-11 / Created : 2020-07-11
React에서 조건에 따라 엘리먼트, 컴포넌트를 숨기거나 나타나게 하는 Conditional Rendering에 대하여 알아봅니다.
# React 조건에 따라 엘리먼트 및 컴포넌트 숨기기, 보여주기
항상이 아닌 특정 조건에 맞는 경우에만 컴포넌트나 엘리먼트를 숨기고 보여줘야 할 경우가 있습니다. 예를들어 ajax로 새로운 데이터를 불러와 렌더링 할 경우 현재 로딩 중이라는 Spinner 컴포넌트를 출력해야 한다고 생각해봅니다.
로딩 후 - Spinner 컴포넌트 감추기
{} 조건문을 사용하는 방법
css를 사용하는 방법도 좋지만 브라우저에 렌더링을 안 하는 부분이 큰 차이입니다. 렌더링을 할 필요가 없다면 안 하는 것이 성능 측면에서 더 나은 방법입니다.
그렇다면 조건에 따른 렌더링을 구현하려면 어떻게 할까요? 아래에서 예제를 하나 만들고 알아봅니다.
! React에서 Conditional Rendering 구현하기
앞에 언급한 것처럼 동일한 예제를 만들어봅니다. 바로 ajax로 호출한 뒤에 Spinner를 보여주고 로딩이 끝나면 Spinner를 감추는 간단한 예제입니다.먼저 이 예제를 구현하기 위해 가장 중요한 부분은 react앱 render() 함수의 리턴으로 { 조건문 }을 사용해야 한다는 점입니다. 방법은 간단합니다. 아래의 소스 코드를 봐주세요.
import Spinner from './Spinner.jsx';
export default () => {
render() {
return (
{ true ? <Spinner /> : null }
)
}
}
export default () => {
render() {
return (
{ true ? <Spinner /> : null }
)
}
}
위의 함수형 컴폰넌트의 코드를 살펴보면 아래의 순서대로 동작하게 됩니다.
- ./Spinner.jsx 컴포넌트를 가져오기
- 조건이 true이므로 Spinner 컴포넌트를 출력하기
만약 true가 아니었다면 null 값을 반환하므로 당연히 출력하지 않게 됩니다. 추가로 위 코드의 조건식은 아래와 같이 바꾸어 사용할 수도 있습니다.
! React && 기호를 사용하여 렌더링 방법
이 방법은 위의 방법과 거의 비슷하지만 false인 경우에는 아무것도 실행할 필요가 없죠. 그래서 &&를 사용하면 더 간단하게 바꿀 수 있습니다. 먼저 코드부터 살펴보겠습니다.
// 기존 코드
return (
{ true ? <Spinner /> : null }
)
// 수정 후 코드
return (
{ true && <Spinner /> }
)
return (
{ true ? <Spinner /> : null }
)
// 수정 후 코드
return (
{ true && <Spinner /> }
)
두 코드의 차이점이 보이시나요? false인 경우 아무것도 실행하지 않습니다.
# react, state를 사용하여 Conditional Render 구현하기
View를 다이나믹하게 바꾸기 위해 컴포넌트 내부의 state를 사용할 수 있습니다. 아래는 isLoading 이름의 상태값을 저장하고 이 값에 따라 Spinner 컴포넌트를 감추고 보여주는 코드를 작성하였습니다.class myApp extends React.Component {
constructor(props) {
this.state = {
isLoading: false
}
}
render() {
const { isLoading } = this.state;
return (
<div>
{ isLoading &&
<Spinner /> }
</div>
)
}
}
constructor(props) {
this.state = {
isLoading: false
}
}
render() {
const { isLoading } = this.state;
return (
<div>
{ isLoading &&
<Spinner /> }
</div>
)
}
}
이제 상태값 isLoading에 따라 바뀌게 되는 코드가 완성 되었습니다.
여기까지 React에서 조건에 따라 렌더링을 수행하는 방법에 대하여 간단하게 알아봤습니다. 참고로 React는 다른 프론트엔드의 *ngIf, v-if와 같은 결과를 얻기 위해 위와 같은 방법을 사용합니다.
아래의 글도 찾고 계시지 않나요?
